<script setup lang="ts">
import Tag from '@/components/Tag.vue'

interface UnitGridItemProps {
  icon?: string // 图标类型
  progress: string // 进度
  isDone?: boolean // 是否学完
}

defineProps<UnitGridItemProps>()
</script>

<template>
  <view class="unit-grid-wrap">
    <Tag v-if="isDone" text="学完" type="warning" class="study-done-tag" color="#FFB500" />

    <view class="unit-grid">
      <view class="item-icon">
        <image v-if="icon === 'inspect-icon'" src="@/static/images/unit/inspect-icon.png" mode="widthFix" />
        <image v-if="icon === 'study-icon'" src="@/static/images/unit/study-icon.png" mode="widthFix" />
      </view>
      <view class="item-info">
        <view class="item-progress">
          <slot name="progress">
            {{ progress ? progress : '--' }}
          </slot>
        </view>
      </view>
    </view>
    <view class="item-title">
      <slot name="title" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.unit-grid-wrap {
    cursor: pointer;
    position: relative;
    .unit-grid {
        display: flex;
        align-items: center;
        padding: 18rpx 20rpx 10rpx;
        background-color: #E8F7F5;
        border-radius: 16rpx;
        border: 1rpx solid $uni-color-primary;
        width: 100rpx;
        height: 100rpx;
        box-sizing: border-box;
        flex-direction: column;

        .item-icon {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 4rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8rpx;

            .item-progress {
                font-size: 20rpx;
                color: #FBC427;
            }
        }
    }

    .study-done-tag{
        position: absolute;
        right: -30rpx;
        top: -20rpx;
        transform: scale(.8);
    }

    .item-title {
        font-size: 20rpx;
        color: #666;
        text-align: center;
        line-height: 50rpx;
    }
}
</style>
